<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Plugin : Content Slider</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($){
	$.fn.imageSlider = function(options) {

		var defaults = {
			auto: null,		//auto run the image slider. set to milliseconds
			btnPrev: null,	//pass in the element's class to create navigation button i.e. btnPrev: ".prev"
			btnNext: null,	//pass in the element's class to create navigation button i.e. btnNext: ".next"
			
			btnGo: null,	/*supply an array of selectors for each element in the image slider. The index 
							of the array represents the index of the element. If the first element in the 
							array is ".0", it means that when the element represented by ".0" is clicked,
							the image slider will slide to the first element and so on. i.e. btnGo: [".0", ".1", ".2"]*/
							
			easing: null,	//the animation effect you want preformed. will take same values as "show" in jQuery
			loop: true,		//if set to true the images will continue to loop and not end
			vertical: false,
			visible: 3,		//number of images to be displayed
			scroll: 1,		//scroll by this number of images
			specUl: null,
			speed: 400,
			start: 0,		//start at this image position (starts at 0)
			
			//Callback funtions
			beforeStart: null,
			afterEnd: null
		};

		var options = $.extend(defaults, options);

		return this.each(function() {
			var running = false, animCss=options.vertical?"top":"left", sizeCss=options.vertical?"height":"width";
			var div = $(this), ul = options.specUl ? $("ul" + options.specUl, div) : $("ul", div), liCollection = $("li", ul), liCollectionLen = liCollection.length, v = options.visible;
			
			if(options.loop) {
				ul.prepend(liCollection.slice(liCollectionLen-v-1+1).clone())
				  .append(liCollection.slice(0,v).clone());
				options.start += v;
			}
	
			var li = $("li", ul), liLen = li.length, curr = options.start;
	
			li.css({overflow: "hidden", float: options.vertical ? "none" : "left"});
			ul.css({margin: "0", padding: "0", position: "relative", "z-index": "1", left: "0px"});
			div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

			var liSize = options.vertical ? li.outerHeight(true) : li.outerWidth(true);		// Full li size(incl margin)-Used for animation
			var ulSize = liSize * liLen;	// size of full ul(total length, not just for the visible items)
			var divSize = liSize * v;	// size of div(total length for just the visible items)

			ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
			div.css(sizeCss, divSize+"px");		// Width of the DIV. length of visible images
	
			if(options.btnPrev)
				$(options.btnPrev).unbind('click');
				$(options.btnPrev).click(function(event) {
					event.preventDefault();
					return go(curr-options.scroll);
				});
	
			if(options.btnNext)
				$(options.btnNext).unbind('click');
				$(options.btnNext).click(function(event) {
					event.preventDefault();
					return go(curr+options.scroll);
				});
	
			if(options.btnGo)
				$.each(options.btnGo, function(i, val) {
					$(val).click(function() {
						return go(options.loop ? options.visible+i : i);
					});
				});

			if(options.auto)
				setInterval(function() {
					go(curr+options.scroll);
				}, options.auto);

			function vis() {
				return li.slice(curr).slice(0,v);
			};
	
			function go(to) {
				if(!running) {
	
					if(options.beforeStart)
						options.beforeStart.call(this, vis());
	
					if(options.loop) {            // If loop we are in first or last, then goto the other end
						if(to<=options.start-v-1) {           // If first, then goto last
							ul.css(animCss, -((liLen-(v*2))*liSize)+"px");
							// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
							curr = to==options.start-v-1 ? liLen-(v*2)-1 : liLen-(v*2)-options.scroll;
						} else if(to>=liLen-v+1) { // If last, then goto first
							ul.css(animCss, -( (v) * liSize ) + "px" );
							// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
							curr = to==liLen-v+1 ? v+1 : v+options.scroll;
						} else curr = to;
					} else {                    // If non-loop and to points to first or last, we just return.
						if(to<0 || to>liLen-v) return;
						else curr = to;
					}                           // If neither overrides it, the curr will still be "to" and we can proceed.
	
					running = true;

					ul.animate(
						animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , options.speed, "linear",
						function() {
							if(options.afterEnd)
								options.afterEnd.call(this, vis());
							running = false;
						}
					);
					// Disable buttons when the carousel reaches the last/first, and enable when not
					if(!options.loop) {
						$(options.btnPrev + "," + options.btnNext).removeClass("disabled");
						$( (curr-options.scroll<0 && options.btnPrev)
							||
						   (curr+options.scroll > liLen-v && options.btnNext)
							||
						   []
						 ).addClass("disabled");
					}
	

				}
				var dummy=curr;
				if (dummy==0)
				  dummy=liCollectionLen;
				else 
				  if (dummy>liCollectionLen) 
				    dummy-=liCollectionLen;
				document.getElementById("counter").innerHTML=dummy;

				return false;
			};
		});
	};
	
})(jQuery);
</script>
<style type="text/css">
.slider {
	overflow:auto
}
.slider .slider-window {
	border:1px solid #ccc;
	margin:0;
	padding:10px 0 10px 10px;
	float:left;
	overflow:auto
}
.slider ul {
	list-style:none;
	margin:0;
	padding:0;
}
.slider li {
	border:1px solid #ccc;
	margin-right:10px;
	text-align:center;
	width:100px;
}
.slider li a {
	text-align:center;
	text-decoration:none;
}
.slider li a img {
	border:none;
	margin-bottom:10px;
}
.slider .prev, .slider .next {
	background:url(../images/slider-dir-arrows.gif) 0 0 no-repeat;
	display:block;
	height:32px;
	float:left;
	width:13px;
	margin-top:65px;
	outline:none
}
.slider .next {
	background-position:0 -32px;
	margin-left:10px
}
.slider .prev {
	margin-right:10px
}
</style>
<script type="text/javascript">

$(document).ready(function() {
	$('.slider-window').imageSlider({
		auto: false,
		btnNext: ".next",
		btnPrev: ".prev",
		visible: 4,
		scroll: 1,
		loop: true
	});
});

</script>
</head>
<body>
<div id="container">
  <h4>Demo</h4>
  <div>Counter: <span id="counter">1</span> of 9</div>
  <br />
  <div id="slider_name" class="slider textBlock"> <a href="#" class="prev">Previous</a>
    <div class="slider-window">
      <ul>
        <li> Block 1 </li>
        <li> Block 2 </li>
        <li> Block 3 </li>
        <li> Block 4 </li>
        <li> Block 5 </li>
        <li> Block 6 </li>
        <li> Block 7 </li>
        <li> Block 8 </li>
        <li> Block 9 </li>
      </ul>
    </div>
    <a href="#" class="next">Next</a> </div>
</div>
</body>
</html>